<template>
	<ul>
		<li class="container" v-for="item in list" :key="item.id">
			<router-link :to="'/home/container/' + item.id">
				<img :src="item.img_url"/>
				<div class="content">
					<div class="L1">
						<h1>{{ item.title }}</h1>
						<h3>{{ item.dian }}</h3>
					</div>
					<div class="col">
						<h5>{{ item.tuihuo }}</h5>
						<div class="L5">
							<span>价格:{{ item.sell_price}}</span>
							<span>已优惠:{{ item.stock_quantity }}</span>
						</div>
					</div>
				</div>
			</router-link>
		</li>
	</ul>
</template>

<script>
	export default{
		data(){
			return{
				list:[]
			}
		},
		created() {
			this.getlists()
		},
		methods:{
			getlists(){
				this.$http.get('src/data/data0.json').then(result => {
				if (result.body.status === 0) {
					this.list = result.body.message;
				}
			});
			}
		}
	}
</script>

<style lang="scss" scoped>
	ul{
		margin: 0;
		padding: 0;
		.container{
			margin: 0;
			padding: 0;
			width: 375px;
			height: 166px;
			overflow: hidden;
			img{
				width: 40%;
				height: 100%;
			}
			.content{
				width: 60%;
				height: 100%;
				float: right;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				.L1{
					h1{
						font-size: 0.9375rem;
						color: #756f5e;
					}
					h3{
						font-size: 0.625rem;
						color: pink;
					}
				}
				h5{
					font-size: 0.625rem;
					color: pink;
				}
				.col{
					display: flex;
					flex-direction: column;
					justify-content: space-around;
					.L5{
						display: flex;
						span{
							flex: 1;
						}
					}
				}
			}
		}
	}
</style>
